<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt4')"></topboxVue>
		<view class="baobox">

			<view class="baobox-box1 mb20">
				<view class="f28 mb30">
					{{$t("fx.n1.txt1")}}
				</view>
				<view class="bj_between mb20">
					<view class="baobox-box1-inp">
						{{user.user.inviteUrl}}
					</view>
					<view class="baobox-box1-btn" @click="seturl">
						{{$t("fx.n1.txt2")}}
					</view>
				</view>
				<view class="f28 mb30">
					{{$t("fx.n1.txt3")}}
				</view>
				<view class="bj_between" style="margin-bottom: 60rpx;">
					<view class="baobox-box1-icobox tc" v-for="(item , i) in list" @click="tokf(item)">
						<image :src="'/static/fx/'+(i+1)+'.png'"></image>
						<view class="f20">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="baobox-box1-inp2 bj_between mb20">
					<view>
						{{$t("bao.inp1")}}
					</view>
					<view class="">
						<text class="cy">{{data.user.children_count}}</text>
						<text class="c9c">{{$t("bao.inp2")}}</text>
					</view>
				</view>
				<view class="baobox-box1-inp2 bj_between mb20">
					<view>
						{{$t("bao.inp3")}}
					</view>
					<view class="cy">
						&gt;= {{data.user.bonus_all_count}}
					</view>
				</view>
				<view class="baobox-box1-inp2 bj_between mb20">
					<view>
						{{$t("bao.inp4")}}
					</view>
					<view class="cy">
						&gt;= {{data.user.invite_bet_all}}
					</view>
				</view>
			</view>

			<view class="baobox-box2 bj_between mb20" @click="tophb">
				<view class="f26">
					{{$t("bao.txt1")}}
				</view>
				<view class="bj_center">
					<view class="cy fwb" style="margin-right: 20rpx;">
						{{$t("bao.txt2")}}
					</view>
					<image src="/static/lm/next.png" class="baobox-box2-next"></image>
				</view>
			</view>

			<view class="baobox-box3 mb40">
				<view class="baobox-box3-bbbox" v-for="item in jllist">
					<view class="item" v-for="ji in item">
						<image src="/static/hd/bb.png" v-if="ji.is_finished == 0"></image>
						<image src="/static/hd/bb2.png" v-if="ji.is_finished == 1"></image>
						<view class="f20 mb20">
							{{ji.t}}
						</view>
						<view class="f26 fwb">
							{{ji.n}}
						</view>
					</view>
				</view>
			</view>
			<view class="f30 fwb mb20">
				{{$t("bao.tit1")}}
			</view>
			<view class="f22 c9c mb40" v-html="txt3"></view>

		</view>

		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let txt3 = t("bao.txt3")

	let jllist = ref([])
	let user = ref({})


	let list = ref([{
			name: "Facebook",
			url: getApp().globalData.config2.facebook_url
		},
		{
			name: "WhatsApp",
			url: getApp().globalData.config2.wechat_url
		},
		{
			name: "Telegram",
			url: getApp().globalData.config2.telegram_url
		},
		{
			name: "Instagram",
			url: getApp().globalData.config2.ins_url
		},
		{
			name: "Twitter",
			url: getApp().globalData.config2.twitter_url
		},
		{
			name: "Kwai"
		},
	])

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	// 跳转到排行榜
	function tophb() {
		uni.switchTab({
			url: "/pages/index/page2"
		})
	}

	let data = ref({})

	onShow(function() {
		user.value = getApp().globalData.userInfo
		
		common.invite().then(res => {
			data.value = res.data.data
			let box = []
			jllist.value = []
			for (var i = 0; i < data.value.bonus_list.length; i++) {
				if (i % 4 == 0) {
					box = []
				}
				let item = data.value.bonus_list[i]
				item.t = data.value.bonus_list[i].count + " Pessoas"
				item.n = data.value.bonus_list[i].bonus
				box.push(item)
				if (i % 4 == 0) {
					jllist.value.push(box)
				}
			}
		})
	})
	
	function tokf(item){
		window.open(item.url)
	}

	function seturl() {
		uni.setClipboardData({
			data: user.value.user.inviteUrl,
			success: () => {
				uni.showToast({
					title: 'Sucesso'
				});
			},
			fail: () => {
				uni.showToast({
					title: 'Falha',
					icon: 'none'
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.baobox {
		padding: 20rpx;

		&-box1 {
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 20rpx;
			padding: 26rpx 20rpx 32rpx;

			&-inp {
				width: 520rpx;
				height: 76rpx;
				line-height: 76rpx;
				background: #003311;
				border-radius: 12rpx;
				// border: 2rpx solid #0569C4;
				padding: 0 24rpx;
				font-size: 24rpx;
				color: #9C9FB2;
			}

			&-inp2 {
				width: 100%;
				height: 76rpx;
				line-height: 76rpx;
				background: #003311;
				border-radius: 12rpx;
				// border: 2rpx solid #0569C4;
				padding: 0 24rpx;
				font-size: 26rpx;
			}

			&-btn {
				width: 124rpx;
				height: 76rpx;
				line-height: 76rpx;
				background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
				text-align: center;
				border-radius: 12rpx;
				font-size: 28rpx;
			}

			&-icobox {
				width: 106rpx;
				color: #A2B5D5;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		&-box2 {
			height: 84rpx;
			background: linear-gradient( 90deg, #00561D 0%, #007E2A 100%);
			border-radius: 12rpx;
			padding: 28rpx 26rpx;

			&-next {
				width: 36rpx;
				height: 36rpx;
			}
		}

		&-box3 {
			background: #00561D;
			border-radius: 20rpx;
			padding: 30rpx 4rpx 336rpx;

			&-bbbox {
				padding-bottom: 60rpx;
				background: url("/static/hd/jb.png") no-repeat 94% 100%;
				background-size: 56rpx 56rpx;
				overflow: hidden;

				.item {
					float: left;
					width: 186rpx;
					text-align: center;
					padding-right: 36rpx;
					background: url("/static/hd/jr.png") no-repeat 100% center;
					background-size: 56rpx 56rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.item:last-child {
					width: 144rpx;
					padding-right: 0;
					background: none;
				}
			}

			&-bbbox:nth-child(even) {
				background: url("/static/hd/jb.png") no-repeat 6% 100%;
				background-size: 56rpx 56rpx;

				.item {
					float: right;
					padding-left: 36rpx;
					padding-right: 0;
					background: url("/static/hd/jl.png") no-repeat 0% center;
					background-size: 56rpx 56rpx;
				}

				.item:last-child {
					width: 144rpx;
					padding-left: 0;
					background: none;
				}
			}

			&-bbbox:last-child {
				background: none
			}
		}
	}
</style>